<template>
	<h1>注册</h1>
	<van-form @submit="onSubmit">
	  <van-cell-group inset>
	    <van-field
	      v-model="username"
	      name="username"
	      label="用户名"
	      placeholder="用户名"
	      :rules="[
			  { required: true, message: '请填写用户名' },
			  {validator: checkUseRepete,message:'用户已经被占用'}
		  ]" 	
	    />
	    <van-field
	      v-model="password"
	      type="password"
	      name="password"
	      label="密码"
	      placeholder="密码"
	      :rules="[{ required: true, message: '请填写密码' },
		  { validator: checkRePassword, message: '两次密码不一致' },
		  ]"
	    />
		<van-field
		  v-model="re_password"
		  type="password"
		  name="re_password"
		  label="密码"
		  placeholder="密码"
		  :rules="[
			  { required: true, message: '请再次输入密码' },
			  { validator: checkRePassword, message: '两次密码不一致' },
		]"
		/>
		<!-- validator-》自定义验证器 -》函数(true -》合法) -->
	  </van-cell-group>
	  <div style="margin: 16px;">
	    <van-button round block type="primary" native-type="submit">
	      提交
	    </van-button>
	  </div>
	</van-form>

</template>

<script setup>
	import { ref } from 'vue';
	import { checkUsername } from '@/api/user.js';
	import { showFailToast, showSuccessToast } from 'vant';
	import 'vant/es/toast/style';
	import { createUser } from '@/api/user.js';
	import router from '@/router';

	
	    var username = ref('');
	    var password = ref('');
		var re_password = ref('');
	
	    const onSubmit = (values) => {
	      console.log('submit', values);
		  //1.在user.js =》createUser =》 请求后端API接口
		  //2. 调用createUser函数，根据函数
		
		createUser(values)
		   .then(res =>{
			   if(res.code !=0){
				   console.log(res.message)
				   showFailToast({
					   message:res.message,
					   position:'top,'
				   });
			   }else{
				   console.log("创建用户成功");
				   showSuccessToast({
					   message:"创建用户成功",
					   position:'top',
				   });
				   router.push({
					   name:"home"
				   })
			   }
		   })
		   .catch(err =>{
			   console.log("调用接口失败");
			   showFailToast({
				   message:"服务器错误!",
				   position:'top',
			   });
		   })
	    };
		
		function checkRePassword(val){
			console.log("检查两次输入的密码是否一致",password.value,re_password.value)
			if(password.value == re_password.value){
				//数据不合法		-》不需要提示信息
				return true
			}else{
				//数据不合法		-》显示message的信息
				return false
				// 数据不合法 -》显示返回的字符串
				// return '检查两次输入的密码是否一致'
			}	
		}
		
		//检查用户名是否被占用 Ajax这是js的
		
		function checkUseRepete(val){
			console.log("检查用户名是否被占用",val)
			
			//调用api接口
			var result = checkUsername(val)
			//此处，需要将checkUsername(val)赋值给result，如果直接checkUsername(val)函数，将不会有返回结果，
			//执行成功
			.then((res)=>{
				console.log(res)
				if(res.code == 0){
					return true
				}else{
					return res.message
				}
			})
			//执行失败
			.catch((err)=>{
				console.log(err)
				return err
			})
			
			return result
			
			
			
			// //调用后端接口来检查  =》Ajax
			// //向后端api发送一个请求
			// checkUsername({"username":val})
			// //调用成功
			// .then(res =>{
			// 	console.log(res)
			// })
			// .catch(err=>{
			// 	console.log(err)
			// })
		}
</script>

<style>
</style>